<template>
  <div class="color-unconfirmed">
    <template v-if="publicState.object">
      <ColorView
        :append="true"
        :key="color"
        :color="color"
        v-for="color in publicState.object.unconfirmed"
      />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { useColorStore } from '@/inject/stores/color'
import { ColorView } from '../ColorView'

defineOptions({ name: 'ColorUnconfirmed' })

const { publicState } = useColorStore()
</script>

<style lang="scss" scoped>
.color-unconfirmed {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  border-radius: 2px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
}
</style>
